<template>
  <div class="box">
    <el-table
      ref="multipleTable"
      :data="dataList"
      tooltip-effect="dark"
      style="width: calc(100% - 2px);margin: 1px;"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        :selectable="selectInit"
        width="55">
      </el-table-column>
      <el-table-column
        label="卷名"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <router-link tag="span" :to="'/Network/NetContent/'+scope.row.Id" class="fontcolor">{{ scope.row.Name }}</router-link>
        </template>
      </el-table-column>
      <el-table-column
        label="Stack"
        show-overflow-tooltip>
        <template>
          -
        </template>
      </el-table-column>
      <el-table-column
        label="Scope"
        prop="Scope"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="驱动"
        prop="Driver"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="可附加"
        show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.Attachable + '' }}</template>
      </el-table-column>
      <el-table-column
        label="内部网络"
        show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.Internal + '' }}</template>
      </el-table-column>
      <el-table-column
        label="IPAM驱动"
        show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.IPAM.Driver }}</template>
      </el-table-column>
      <el-table-column
        label="IPAM子网"
        show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.IPAM.Config.length !== 0 ? scope.row.IPAM.Config[0].Subnet : '...' }}</template>
      </el-table-column>
      <el-table-column
        label="IPAM网关"
        show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.IPAM.Config.length !== 0 ? scope.row.IPAM.Config[0].Gateway : '...' }}</template>
      </el-table-column>
      <el-table-column
        label="权限"
        show-overflow-tooltip>
        <template>
          Administrators
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      multipleSelection: []
    }
  },
  watch: {
    multipleSelection: function () {
      this.$emit('changecheck', this.multipleSelection)
    }
  },
  props: ['dataList'],
  methods: {
    // 处理选中
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 禁用系统默认网络
    selectInit (row, index) {
      if (row.Name === 'host' || row.Name === 'bridge' || row.Name === 'none') {
        return false // 不可勾选
      } else {
        return true // 可勾选
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 20px;
}
.fontcolor{
  color: #067FB5;
  cursor: pointer; // 鼠标移上去变小手
}
</style>
